<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>div+css布局</title>
		<style type="text/css">
			html{
				/* 如果html没有设置背景颜色，直接设置body的背景色，则html会侵占body的背景色 */
				background-color: white;
			}
			body{
				margin: 0px auto; /*居中处理**/
				width: 80%;
				height: 600px; /* 一般不做设定，右内部标签的高度决定 */
				border: #41A863 solid 1px;
				background-color: #C9D7E5;
			}
			#mainContain{
				width: 100%;
				height: 100%;
			}
			.rowstyle1{
				clear:both;
				margin: 5px auto;
				width: 80%;
				height: 200px;
			}
			.rowstyle1 div{
				margin: 3px 5px;
				float: left;
				border: red solid 1px;
				width: 10%;
			}
			/* 相对定位 */
			.rowstyle1 div:last-child{
				position: relative;
				/* left:100px; */
				/* right:50%; */
				top:50%;
			}
		</style>
	</head>
	<body>
		<div id="mainContain">
			<div id="row1" class="rowstyle1">
				<div id="div1">div1.1</div>
				<div id="div2">div1.2</div>
				<div id="div2">div1.3</div>
			</div>
			<div id="row2" class="rowstyle1">
				<div id="div3">div2.1</div>
				<div id="div4">div2.2</div>
				<div id="div4">div2.3</div>
			</div>
			
		</div>
	</body>
</html>
